<template>
  <div class="Index">
    <Head_tip :title='"题目"+itemNum'></Head_tip>
    <div>
      <div class="item_back item_container_style">
        <div class="item_list_container">
          <header class="item_title">{{itemDetail[itemNum-1].topic_name}}</header>
          <ul>
            <li class="item_list" v-for="(li,index) in itemDetail[itemNum-1].topic_answer" @click="choosed(index,li.topic_answer_id)">
              <span class="option_style" v-bind:class="[choosedIndex==index? 'has_choosed': '']">{{chooseEglish(index)}}</span>
              <span class="option_detail">{{li.answer_name}}</span>
            </li>

          </ul>
        </div>
      </div>
      <span class="next_item button_style" @click='nextitem(choosedId)' v-if='itemNum < itemDetail.length'></span>
      <span class="submit_item button_style" @click='submit()' v-if='itemNum == itemDetail.length'></span>
    </div>
  </div>
</template>

<script type="es6">
  import  Head_tip from '../header/header'
  import  {mapState, mapActions } from  'vuex'
  export default {
    data () {
      return {
        msg: 'Welcome to Your Vue.js App',
        choosedId : 0,
        choosedIndex : null
      }
    },
    components:{
      Head_tip
    },
    computed: mapState([
      'itemNum', //第几题
      'level', //第几周
      'itemDetail', //题目详情
      'timer', //计时器
    ]),
    methods:{
      ...mapActions(['add_item','init_item']),
      chooseEglish(index){
        switch(index){
          case  0 :  return 'A'
          case  1 :  return 'B'
          case  2 :  return 'C'
          case  3 :  return 'D'
        }
      },
      choosed(index,id){
         this.choosedIndex= index
         this.choosedId= id
      },
      nextitem(id){
        if(id==0){
          alert('请输入答案')
        }else{
          this.choosedIndex = null
          this.add_item(id)
        }
      },
      submit(){
        if(this.choosedIndex == null){
          alert('选择答案先')
        }else{
          this.add_item(this.choosedId)
          this.$router.push('result')
        }

      }

    },
  created(){
    this.init_item();
  }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less">
  .item_container_style{
    height: 11.625rem;
    width: 13.15rem;
    background-repeat: no-repeat;
    position: absolute;
    top: 4.1rem;
    left: 1rem;
  }
  .home_logo{
    background-image: url(../../assets/img/1-2.png);
    background-size: 13.142rem 100%;
    background-position: right center;
  }
  .item_back{
    background-image: url(../../assets/img/2-1.png);
    background-size: 100% 100%;
  }
  .button_style{
    display: block;
    height: 2.1rem;
    width: 4.35rem;
    background-size: 100% 100%;
    position: absolute;
    top: 16.5rem;
    left: 50%;
    margin-left: -2.4rem;
    background-repeat: no-repeat;
  }
  .start{
    background-image: url(../../assets/img/1-4.png);
  }
  .next_item{
    background-image: url(../../assets/img/2-2.png);
  }
  .submit_item{
    background-image: url(../../assets/img/3-1.png);
  }
  .item_list_container{
    position: absolute;
    height: 7.0rem;
    width: 8.0rem;
    top: 2.4rem;
    left: 3rem;
    text-align: left;
    -webkit-font-smoothing: antialiased;
  }
  .item_title{
    font-size: 0.65rem;
    color: #fff;
    line-height: 0.7rem;
  }
  .item_list{
    font-size: 0;
    margin-top: 0.4rem;
    width: 10rem;
  span{
    display: inline-block;
    font-size: 0.6rem;
    color: #fff;
    vertical-align: middle;
  }
  .option_style{
    height: 0.725rem;
    width: 0.725rem;
    border: 1px solid #fff;
    border-radius: 50%;
    line-height: 0.725rem;
    text-align: center;
    margin-right: 0.3rem;
    font-size: 0.5rem;
    font-family: 'Arial';
  }
  .has_choosed{
    background-color: #ffd400;
    color: #575757;
    border-color: #ffd400;
  }
  .option_detail{
    width: 7.5rem;
    padding-top: 0.11rem;
  }
  }


</style>
